<template>
  <div class="app-container no-padding chit-look-root">
    <div class="query-container">
      <chit-query placeholder="请输入关键字" :only-query="true" @query="attQuery"
                  :base-map="baseMap"></chit-query>
    </div>
    <base-map @geoQueryBak="geoQueryBak" :buffer-map-config="bufferMapConfig" @mapLoaded="mapLoaded"></base-map>
    <div class="crop-card" v-if="source === 'bxView'">
      <span>玉米：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="number-box">9,812.94</span> 公顷</span>
      <span>旱田玉米：<span class="number-box">68,205.15</span> 公顷</span>
      <span>水田玉米：<span class="number-box">2,044.25</span> 公顷</span>
      <span>大豆：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="number-box">1,147.35</span> 公顷</span>
      <span>水稻：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="number-box">436.19</span> 公顷</span>
    </div>
  </div>
</template>

<script>
import BaseMap from "@/components/BaseMap/index.vue";
import {baseMapMixins} from "@/mixins/baseMapMixins";
import mapConfig from "@/data/bxMapConfig.json";
import {pageBaseMapMixins} from "@/mixins/pageBaseMapMixins";
import {
  getFeaturesByQueryResult,
  getOnlyResByQueryResult,
  union,
  getGeometryListByQueryResult,
  queryResultsByUrls
} from 'lark-map'
import ChitQuery from "@/views/chitLook/components/chitQuery/index.vue";

export default {
  name: "chitLook",
  mixins: [baseMapMixins, pageBaseMapMixins],
  props: {
    source: {
      type: String,
      required: true,
    },
  },
  components: {
    ChitQuery,
    BaseMap
  },
  data() {
    return {
      layerId: 'baodan',
      bufferMapConfig: mapConfig,
    }
  },
  methods: {
    async attQuery(param) {
      this.removeMapHighlight()
      let {baseMap: {view}, layerId} = this
      let whereValue = `保单号 LIKE '%${param}%' or SZDJ LIKE '%${param}%' or ZZSX LIKE '%${param}%' or SZDJ LIKE '%${param}%' or ZLDWMC LIKE '%${param}%'`
      let result = {
        view: view,
        idList: [layerId],
        outFields: [{parentId: layerId, value: ['*']}],
        where: [{parentId: layerId, value: whereValue}],
        returnGeometry: [{parentId: layerId, value: true}],
        subLayerIds: [{parentId: layerId, value: [0]}]
      }
      let res = await queryResultsByUrls(result)

      let geometryList = getGeometryListByQueryResult({res, merge: true})

      if (!geometryList?.length) {
        this.$message.warning('没有查询结果')
        return
      }
      let unionGeometry = union(geometryList)
      this.baseMap.highlight(unionGeometry)
    },
    geoQueryBak(res, mapPoint) {
      let features = getFeaturesByQueryResult({res, mapPoint})
      this.openPopup(this.layerId, features, mapPoint, '保单信息')
    }
  },
  created() {
    this.awaitMapLoaded().then(() => {
      let txtFileList = [
        {
          value: '保单号',
          label: '保单号',
          addToMap: false,
        },
        {
          value: 'ZLDWMC',
          label: '嘎查/村',
          addToMap: false,
        },
        {
          value: 'ZZSX',
          label: '种植作物',
          addToMap: false,
        },
      ]
      this.addLayerFiledInfo(this.layerId, txtFileList)
    })
  }
}
</script>

<style lang="scss" scoped>
.chit-look-root {
  position: relative;

  .query-container {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 500px;
    height: 40px;
    z-index: 20;
  }

  .crop-card{
    position: absolute;
    top:20px;
    right:20px;
    width:auto;
    //height:80px;
    //border:1px solid #E7E7E7;
    box-sizing: border-box;
    padding : 5px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    border-radius: 5px;
    background-color: #FFFFFF;
    color: rgba(0, 138, 100, 1);
    box-shadow: 4px 4px 15px 2px rgba(0,0,0,0.1);
    line-height: 26px;

    .number-box{
      color: #303133;
    }

  }
}
</style>
